<template>
	<div class="p-6 space-y-6">
		<h2 class="text-xl font-bold mb-4">运营端</h2>

		<el-tabs v-model="activeTab">
			<el-tab-pane label="审批中心" name="approval">
				<el-table :data="approvals" border>
					<el-table-column type="index" label="#" width="50" />
					<el-table-column prop="name" label="审批名称" />
					<el-table-column prop="status" label="状态" />
					<el-table-column prop="initiator" label="发起人" />
				</el-table>
			</el-tab-pane>

			<el-tab-pane label="用户/企业管理" name="user">
				<el-table :data="users" border>
					<el-table-column type="index" label="#" width="50" />
					<el-table-column prop="name" label="用户/企业" />
					<el-table-column prop="type" label="类型" />
					<el-table-column prop="status" label="状态" />
				</el-table>
			</el-tab-pane>

			<el-tab-pane label="商品/交易管理" name="goods">
				<el-table :data="transactions" border>
					<el-table-column type="index" label="#" width="50" />
					<el-table-column prop="product" label="商品" />
					<el-table-column prop="customer" label="客户" />
					<el-table-column prop="amount" label="金额" />
				</el-table>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script setup>
import { ref } from 'vue'

const activeTab = ref('approval')

const approvals = ref(Array.from({ length: 10 }).map((_, i) => ({
	name: `审批单${i + 1}`,
	status: ['待审批', '已通过', '已拒绝'][Math.floor(Math.random() * 3)],
	initiator: ['张三', '李四', '王五'][Math.floor(Math.random() * 3)]
})))

const users = ref(Array.from({ length: 10 }).map((_, i) => ({
	name: `企业/用户${i + 1}`,
	type: ['企业', '个人'][Math.floor(Math.random() * 2)],
	status: ['启用', '禁用'][Math.floor(Math.random() * 2)]
})))

const transactions = ref(Array.from({ length: 10 }).map((_, i) => ({
	product: ['EUV光刻胶', 'G线光刻胶', '蚀刻液', '去胶剂', '清洗剂'][Math.floor(Math.random() * 5)],
	customer: ['华为', '中兴', '台积电', '京东方', '长江存储'][Math.floor(Math.random() * 5)],
	amount: (Math.random() * 5000 + 500).toFixed(2)
})))
</script>

<style scoped>
.text-xl {
	font-size: 1.25rem;
}
</style>
  
